<template>
	<page-header-wrapper>
		<a-card :bordered="false">
			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="24">
						<a-col :md="4" :sm="24">
							<a-form-item label="帮扶门店" :wrapperCol='wrapperCol' :labelCol="labelCol" >
								<a-select v-model="form_store_id" :allowClear='true'  placeholder="请选择门店" @change="initData(1)">
								  <a-select-option value="" disabled>请选择门店</a-select-option>
								  <a-select-option :value="item.id" v-for="(item,index) in storeList" :key='item.id'>{{item.name}}</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="4" :sm="24">
							<a-form-item label="被帮扶门店" :wrapperCol='wrapperCol' :labelCol="labelCol" >
								<a-select v-model="to_store_id" :allowClear='true'  placeholder="请选择门店" @change="initData(1)">
								  <a-select-option value="" disabled>请选择门店</a-select-option>
								  <a-select-option :value="item.id" v-for="(item,index) in storeList" :key='item.id'>{{item.name}}</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="1" :sm="24" :offset="14">
							<a-button type="primary" icon="plus" @click='visible = true'>新增</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" showPagination="auto" rowKey="id" ref="table" :loading='loading'>
				<span slot="action" slot-scope="text, record">
					<a-button type="primary" size='small' @click='card = record;visible = true;model="2"'>编辑</a-button>
					<a-popconfirm
					  title="确定永久删除该帮扶记录吗？"
					  @confirm="helpDel(record)"
					>
						<a-button type="danger" size='small' style="margin:0 12px;">删除</a-button>
					</a-popconfirm>
					<a-button size='small' @click='changeHelp(record)'>{{record.status == '1'?'停止':'恢复'}}</a-button>
				</span>
			</a-table>
			<assist ref="createModal" :visible='visible' :model='model' :cardInfo='card' @closeModal='initData(1)' @ok="initData(1)" :store.async='storeList'/>
		</a-card>
	</page-header-wrapper>
</template>

<script>
	let columns = [{title: 'ID',dataIndex: 'id'},{title: '帮扶门店',dataIndex: 'from_store'},{title: '发放数量',dataIndex: 'from_store_nums',align:'center',},
		{title: '被帮扶门店',dataIndex: 'to_store'},
		{title: '开始时间',dataIndex: 'start_time'},
		{title: '结束时间',dataIndex: 'end_time'},
		{
			title: '状态',
			dataIndex: 'status',
			customRender: (text, record, index) => {
				if (text == '1') {
					return '正常';
				} else if (text == '0') {
					return '停止';
				}
			},
		},
		{title: '操作',dataIndex:'action',width:'300px',scopedSlots: { customRender: 'action' },}
	];
	import { helpList,helpDel,helpStop,helpping} from '@/api/assist';
	import { storeList } from '@/api/electronCard';
	import assist from './modules/assist';
	export default {
		name: 'storeAssis',
		components:{
			assist
		},
		data() {
			return {
				visible: false,
				model:'1',
				loading:false,
				dataSource: [],
				kw:'',
				card:{},// 被编辑的记录
				pagination: {
					// 分页配置
					pageSize: 10, // 每页显示的条数
					showSizeChanger: true, // 是否可以改变每页显示的条数
					pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页显示条数
					showQuickJumper: true, // 是否可以快速跳转到指定页
					showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
					current: 1, // 当前页数
					total: 0, // 总条数
					onShowSizeChange:this.initData,//每页显示数改变的回调
					onChange: this.initData // 页码改变时的回调函数
				},
				columns: [],
				labelCol: {
					style: {
						width: '80px',
					},
				},
				wrapperCol:{
					style: {
						width: '350px',
						display:'inline-block',
					},
				},
				storeList:[],
				form_store_id:'',
				to_store_id:'',
			}
		},
		created() {
			this.columns = columns;
			this.initData();
			// 门店列表
			this.initStore();
		},
		methods: {
			// 数据
			initData(page, pageSize) {
				if (this.visible) {
					this.visible = false;
				}
				this.loading = true;
				this.pagination.current = page ? page : this.pagination.current;
				this.pagination.pageSize = pageSize ? pageSize : this.pagination.pageSize;
				helpList({
					form_store_id:this.form_store_id,
					to_store_id:this.to_store_id,
					pageNo: this.pagination.current,
					pageSize: this.pagination.pageSize,
				}).then(res => {
					this.loading = false;
					if (res.status == '0') {
						res.data.data.forEach((item,index)=>{
							item.range = [item.start_time,item.end_time];
						})
						this.dataSource = res.data.data;
						this.pagination.total = res.data.totalCount;
					} else {
						this.$message.error(res.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 删除记录
			helpDel(line){
				helpDel({
					id:line.id
				}).then(res=>{
					if (res.status == '0') {
						this.initData(1);
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			// 门店列表
			initStore(){
				storeList().then(res=>{
					if(res.status == 0){
						this.storeList = res.data;
					}
				})
			},
			// 修改帮助状态
			changeHelp(line){
				if(line.status == '1'){//帮助中
					helpStop({
						id:line.id
					}).then(res=>{
						if (res.status == '0') {
							this.initData(1);
						} else {
							this.$message.error(res.msg);
						}
					})
				}else{
					helpping({
						id:line.id
					}).then(res=>{
						if (res.status == '0') {
							this.initData(1);
						} else {
							this.$message.error(res.msg);
						}
					})
				}
			},
		}
	}
</script>
